<template>
  <div class="chatRoom">
    <div class="Roomlist">
      <h1
        style="
          color: #fff;
          margin-left: 30px;
          margin-bottom: 50px;
          margin-top: 25px;
        "
      >
        聊天室
      </h1>
      <span style="margin-left: 35px; color: #eee">聊天列表</span>
      <div class="friendlist">
        <div v-for="item in this.friendInfo.length" :key="item">
          <div
            class="onefriend"
            @click="
              getChatOneContent(
                friendInfo[item - 1].userName,
                friendInfo[item - 1].userHead
              )
            "
          >
            <div class="Roomhead">
              <img
                :src="friendInfo[item - 1].userHead"
                alt=""
                class="userimg"
              />
            </div>
            <div style="margin-left: 14px; transform: translate(3px, 17px);position: relative; width: 80px;">
              <span>{{ friendInfo[item - 1].userName }}</span
              ><br />
              <span style="font-size: 8.6px">{{
                friendInfo[item - 1].end_content |ellipsis
              }}</span>
            </div>
            <div style="margin-left: 14px;transform: translate(8px, 28.5px);position: relative; text-align: center;">
              <p v-if="friendInfo[item - 1].unreadNum!=0 && friendInfo[item - 1].unreadNum!=null" style="color: #eee; background-color: red; width: 20px; height: 20px; border-radius: 50%;">{{
                friendInfo[item - 1].unreadNum
              }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chatArea">
      <div class="userIfon" style="display: inline-flex" v-if="isuserIfon">
        <img
          :src="userIfnourl"
          alt=""
          class="userimg2"
        />
        <div style="margin-left: 14px; transform: translate(3px, 20px)">
          <span>{{frindname}}</span><br />
        </div>
      </div>
      <div class="chat">
        <div class="content" id="content">
            <h1 style="transform:  translateX(240px);">欢迎使用本聊天系统</h1>
        </div>
        <div class="send">
          <img
            src="../assets/u=4152174361,2383487518&fm=253&fmt=auto&app=138&f=JPEG.webp"
            style="
              width: 36px;
              height: 36px;
              border-radius: 6px;
              margin-left: 32px;
            "
            @click="emojiShow()"
          />
          <div class="emojiList" v-if="emojishow">
              <span v-for="emoji in emojiList.length" :key="emoji" style="font-size: 23px;  margin-left: 9px;" @click="whick_emoji(emoji)">{{emojiList[emoji-1]}}</span>
          </div>
          <input class="input_content" v-model="msg.message" id="input_content"/>
          <button
            style="
              width: 54px;
              height: 34px;
              color: #fff;
              background-color: #2d94ad;
              border: none;
              border-radius: 8px;
              margin-left: 10px;
            "
            @click="sendMsg()"
          >
            发送
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
//这个就是引入封装的websocket
import { useWebSocket } from "../config";
export default {
  data() {
    return {
      emojiList: [
        "😀",
        "😃",
        "😄",
        "😁",
        "😆",
        "😅",
        "🤣",
        "😂",
        "🙂",
        "🫠",
        "😉",
        "😊",
        "😇",
        "🥰",
        "😍",
        "😗",
        "😜",
        "🤪",
        "😝",
        "🤑",
        "😒",
        "😷",
        "😴",
        "🤮",
        "🤢",
        "🥵",
        "🥶",
        "😵",
        "😵‍💫",
        "🤯",
        "😮",
        "😎",
        "😭",
        "😡",
        "💀",
        "🤡",
        "👋",
        "👻",
        "👏",
        "✍️",
        "💋",
        "😻",
        "😽",
        "🙀",
        "🤐",
        "🤨",
        "😐",
        "😑",
        "😶",
        "🫥",
        "🥳",
        "🫳",
        "🫴",
        "🤏",
        "✌️",
        "🤞",
        "🫰",
        "🫵",
        "👀",
        "👁️",
        "🕛",
        "🕧",
        "🕐",
        "🕜",
        "🕑",
        "🕝",
        "🕒",
        "🕞",
        "🕓",
        "🕟",
        "🕔",
        "🕠",
        "🕕",
        "🕡",
        "🕖",
        "🕢",
        "🕗",
        "🕣",
        "🕘",
        "🕤",
        "🕙",
        "🕥",
        "🕚",
        "🕦",
        "✖️",
        "➕",
        "➖",
        "➗",
        "🟰",
        "❓",
        "❗",
      ],
      friendInfo: [],
      username: this.$route.query.username,
      MyHead: this.$route.query.userHead,
      ws: "",
      msg: { username: this.$route.query.username, message: "",friend_Name:''},
      Nowfriend_head:'',
      Nowfriend_name:'',
      emojishow:false,
      isuserIfon:false,
      userIfnourl:"",
      frindname:"",
    };
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0,10) + '......'
      }
      return value
    }
  },
  created() {
    this.init();
  },
  mounted: function () {
    this.getfriendInfo();
  },
  methods: {
    init(){
      this.ws = useWebSocket(this.handleMessage,this.$route.query.username);
    },
    emojiShow(){
      if(this.emojishow==true){
        this.emojishow=false;
      }else{
        this.emojishow=true
      }
    },

    /**
     * 添加emoji表情到输入框中
     * @param {*} num //选择的emoji表情是第几号
     */
    whick_emoji(num){
     this.msg.message=this.msg.message+this.emojiList[num-1]
    },
    handleMessage(evt) {
      var friend_length=this.friendInfo.length
    if (evt.data) {
        if(this.Nowfriend_name==JSON.parse(evt.data).friendName){
        var content = document.getElementById("content");
        var content1 = document.createElement("div");
        content1.className = "qipao";
        content1.innerHTML = `<span style="margin-right: 8px; margin-left: 12px;">${this.Nowfriend_name}</span> <span>${new Date()}</span>
                        <div style="display: flex;">
                            <img src="${this.Nowfriend_head}" alt="" class="userimg3">    
                            <div class="pp1" style="width: 80%;">
	                	        <span>${JSON.parse(evt.data).message}</span>
	                        </div>
                        </div> `;
        content.append(content1)
      }else{
          for(var i=0;i<friend_length;i++){
            if(this.friendInfo[i].userName==JSON.parse(evt.data).friendName){
               this.friendInfo[i].unreadNum=(this.friendInfo[i].unreadNum-0)+1
               axios.post("/addMessageNum", {
                          friendName: this.friendInfo[i].userName,
                           username: this.username,})
            } 
          }
      }
    }
   },
   sendMsg(){
    console.log(this.msg.message)
    if(this.msg.message!=''){
        console.log(JSON.stringify(this.msg))
        var content = document.getElementById("content");
        var content1 = document.createElement("div");
        content1.className = "qipao";
        content1.innerHTML = `<div style="text-align: right;"><span style="margin-right: 8px;">${this.username}</span> <span>${new Date()}</span></div>
                            <div style="display: flex;">
                            <img src="${this.MyHead}" alt="" class="userimg4">    
                            <div class="pp2" style="width: 80%;">
	                	    <span>${this.msg.message}</span>
	                        </div>
                            </div> `;
        content.append(content1)
        this.ws.send(JSON.stringify(this.msg))
    }
       else{
        alert("没有数据呀")
       }
    },
    close(){
      this.ws.close();
    },
    getfriendInfo() {
      axios
        .post("/GetfriendInfo", {
          user_token: localStorage.getItem("user_Token"),
        })
        .then((res) => {
          this.friendInfo = res.data;
          console.log(res.data)
        });
    },
    getChatOneContent(friendName, friendHead) {
      this.isuserIfon=true
      this.frindname=friendName
      this.userIfnourl=friendHead
      this.msg.friend_Name=friendName
      this.Nowfriend_name=friendName
      this.Nowfriend_head=friendHead
      for(var i=0;i<this.friendInfo.length;i++){
        if(this.friendInfo[i].userName==friendName){
          this.friendInfo[i].unreadNum=(this.friendInfo[i].unreadNum-0)-(this.friendInfo[i].unreadNum-0)
        }
      }
      axios
        .post("/readMessage", {
          friendName: friendName,
          username: this.username,
        })
      axios
        .post("/ChatOneContent", {
          friendName: friendName,
          username: this.username,
        })
        .then((res) => {
          var content = document.getElementById("content");
          content.innerHTML = "";
          for (var i = 0; i < res.data.length; i++) {
            var content1 = document.createElement("div");
            content1.className = "qipao";
            if (res.data[i].sendUser != this.username) {
              content1.innerHTML = `<span style="margin-right: 8px; margin-left: 12px;">${res.data[i].sendUser}</span> <span>${res.data[i].createTime}</span>
                        <div style="display: flex;">
                            <img src="${friendHead}" alt="" class="userimg3">    
                            <div class="pp1" style="width: 80%;">
	                	        <span>${res.data[i].chatContent}</span>
	                        </div>
                        </div> `;
                content.append(content1)
            } else {
              content1.innerHTML = `<div style="text-align: right;"><span style="margin-right: 8px;">${this.username}</span> <span>${res.data[i].createTime}</span></div>
                        <div style="display: flex;">
                            <img src="${this.MyHead}" alt="" class="userimg4">    
                            <div class="pp2" style="width: 80%;">
	                	        <span>${res.data[i].chatContent}</span>
	                        </div>
                        </div> `;
                        content.append(content1)
            }
          }
        });
    },
  },
};
</script>

<style>
.emojiList{
  width: 300px; 
  height: 200px; 
  background-color: #fffefe; 
  border: solid 2px #000000;
  position: absolute; 
  left: 45%; 
  transform: translate(-350px,-128px);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}
.emojiList::-webkit-scrollbar {
  display: none;
}

.pp1 span {
  background-color: #fff;
  padding: 5px 8px;
  display: inline-block;
  border-radius: 4px;
  margin: 10px 0 10px 10px;
  position: absolute;
  left: 60px;
}
.pp1 span::after {
  content: "";
  border: 8px solid #ffffff00;
  border-right: 8px solid #fff;
  position: absolute;
  top: 6px;
  left: -16px;
}
.pp2 span {
  background-color: #68c06e;
  padding: 5px 8px;
  display: inline-block;
  border-radius: 4px;
  margin: 10px 0 10px 10px;
  position: absolute;
  right: 60px;
}
.pp2 span::after {
  content: "";
  border: 8px solid #ffffff00;
  border-left: 8px solid #68c06e;
  position: absolute;
  top: 6px;
  right: -16px;
}
.chatRoom {
  display: flex;
  background-color: rgb(62, 62, 106);
  margin: 0 auto;
  height: 720px;
  width: 1130px;
  border-radius: 30px;
  margin-top: 80px;
}
.Roomlist {
  width: 22%;
  height: 100%;
}
.chatArea {
  width: 78%;
  height: 100%;
  background-color: rgb(197, 137, 137);
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
}
.friendlist {
  margin-top: 36px;
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
.friendlist::-webkit-scrollbar {
  display: none;
}
.onefriend {
  height: 76px;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: 35px;
  margin-bottom: 18px;
  border-radius: 12px;
  display: inline-flex;
}
.userimg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: #eee solid 2px;
  transform: translate(4.5px, 17px);
  position: relative;
}
.userimg3 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: #eee solid 2px;
  transform: translate(4.5px, 8px);
  margin-right: 12px;
  position: relative;
}
.qipao {
  display: block;
  height: auto;
  position: relative;
  margin: 12px;
}
.userimg4 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: #eee solid 2px;
  transform: translate(740px, 8px);
}
.Roomhead::before {
  content: " ";
  width: 12px;
  height: 43px;
  z-index: 1;
  display: inline-block;
  transform: translate(0, 17px);
  background-color: rgb(144, 225, 80);
}
.userimg2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 40px;
  border: #eee solid 2px;
  transform: translate(4.5px, 17px);
  position: relative;
}
.chat {
  margin-left: 40px;
  margin-top: 60px;
  height: 560px;
  width: 810px;
  background-color: antiquewhite;
  border-radius: 30px;
}
.content {
  width: 100%;
  height: 85%;
  overflow-x: hidden;
  overflow-y: auto;
}
.content::-webkit-scrollbar {
  display: none;
}
.send {
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  position: relative;
}
.input_content {
  width: 76%;
  border-radius: 30px;
  height: 32px;
  border: #2d94ad solid 1.6px;
  outline: none;
  padding-left: 30px;
  margin-left: 20px;
}
</style>